<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>职员管理</span>
    </div>

    <!--<div class="clearfix mb15">-->
    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>
    <!--</div>-->
    <v-tableBtns
      :show-create="true"
      :show-export="false"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      :deletable="admin||assistantRole||financeRole"
      btn-class="btn"
      @sortChange="sortChange"
      @del="onDelete"
      @edit="edit"
      @read="read"
    />

    <!--<v-pagination-->
      <!--:page-info="pageInfo"-->
      <!--:get-table-list="getTableList"-->
    <!--/>-->

    <el-dialog
      :visible.sync="dialogVisible"
      title="添加/修改职员信息"
      width="30%"
      center>
      <v-form
        :form-title="employeeTitle"
        :form-data="employeeData"
        label-width="120px"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'
  import auth from '@/mixins/auth'

  export default {
    name: 'employee',
    mixins: [auth],
    data() {
      return {
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        dialogVisible: false,
        // 排序
        sidx: 'reqid',
        sortKey: null,

        formTitle: [
          {
            cn: '姓名',
            en: 're_name'
          },
          {
            cn: '部门',
            en: 'bm_name'
          },
        ],
        filter_info: {},

        tableTitle: [
          {
            cn: 'id',
            en: 'id',
          },
          {
            cn: '姓名',
            en: 're_name',
          },
          {
            cn: '部门',
            en: 'bm_name',
          },
          {
            cn: '钉钉id',
            en: 'ding_acc_id'
          },
          {
            cn: '小程序id',
            en: 'mini_acc_id',
          },
        ],
        tableData: [],
        employeeData: {},
        isEdit:false,
        dingList:[],
        wechatList:[],

        departList:[]
      }
    },
    created(){
      this.getWechatList()
      this.getDepartList()
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getDepartList(){

        this.$get('action/StaffinfoCtrl/staff_group')
          .then(res => {
            let list
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                return {
                  label:item.bm_name,
                  value: item.id
                }
              })
            }
            this.departList = list || []
          })
      },
      getTableList(data) {
        const loading = this.$loading()

        const datas = {
          ...this.filter_infos,
        }
        this.$get('action/WxUserCtrl/staffinfo', datas)
          .then(res => {
            const list = []
            if (res.data) {
              res.data.staffinfotree.forEach(item => {
                list.push(item)
              })
            }
            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },

      // 获取小程序列表
      getWechatList(){
        this.$get('action/WxUserCtrl/tree')
          .then(res => {
            const list = []
            if (res.data) {
              res.data.WxUserTree.forEach(item => {
                list.push({
                  label:item.name,
                  value:item.id,
                })
              })
            }
            this.wechatList = list || []
          })
          .catch(err => {
            this.$message({
              message: '获取数据失败',
              type: 'error'
            })
          })
      },

      addNew() {
        this.dialogVisible = true
        this.isEdit = false
        this.employeeData = {}
      },
      // 搜索
      search() {
        this.getTableList()
      },
      reset() {
        this.filter_info = {}
        this.getTableList()
      },
      edit(val) {
        this.dialogVisible = true
        this.isEdit = true
        this.employeeData = this.$deepClone(val.row)
      },
      read(val) {
        this.$router.push({
          name: 'invoice_manage.preview',
          query: {
            id: val.row.reqid
          }
        })
      },
      submit() {
        this.dialogVisible = false
        const data = this.employeeData
        if (this.employeeData.bm_id) {
          this.departList.forEach(item=>{
            if (item.value === this.employeeData.bm_id) {
              data.bm_name = item.label
            }
          })
        }
        this.$post('action/StaffinfoCtrl/save', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },
      onDelete(val) {
        let data
        data = {id: val.row.id}
        this.$post('action/StaffinfoCtrl/del', data)
          .then(res => {
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },
      // 排序
      sortChange({column, prop, order}) {
        console.log(column, prop, order)
        this.sidx = prop || 'reqid'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      },

    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      employeeTitle() {
        if (this.isEdit) {
          return this.editTitle
        } else {
          return this.addTitle
        }
      },
      addTitle(){
        return ([
          {
            cn: '姓名',
            en: 're_name',
          },
          {
            cn: '钉钉id',
            en: 'ding_acc_id',
          },
          {
            cn: '小程序姓名',
            en: 'mini_acc_id',
            type:'select',
            list:this.wechatList
          },
          {
            cn: '部门(可选)',
            en: 'bm_id',
            type:'select',
            list:this.departList
          },
        ])
      },
      editTitle(){
        return ([
          {
            cn: '姓名',
            en: 're_name',
            disable:true
          },
          {
            cn: '钉钉id',
            en: 'ding_acc_id',
          },
          {
            cn: '小程序姓名',
            en: 'mini_acc_id',
            type:'select',
            list:this.wechatList
          },
          {
            cn: '部门(可选)',
            en: 'bm_id',
            type:'select',
            list:this.departList
          },
        ])
      },
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            delete data[key]
            continue
          }
          if (key === 'created_at') {
            data.start_time = origin[key][0]
            data.End_time = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    }
  }
</script>

